<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.ooho.messageboard.model.MessageBean" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: hugohoo
  Date: 10/15/16
  Time: 10:53 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" href="../public/css/materialize.min.css">

</head>
<body>
    <%
        List<MessageBean> messageList = (List<MessageBean>) request.getAttribute("messageList");
    %>

    <div class="container">
        <h4>Message Board</h4>
        <table class="striped centered" id="messageTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>Message</th>
                <th>Author</th>
                <th>Time</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${messageList}" var="item">
                <tr>
                    <td> <c:out value="${item.getId()}" /> </td>
                    <td> <c:out value="${item.getMessage()}"/> </td>
                    <td> <c:out value="${item.getAuthor()}"/> </td>
                    <td> <c:out value="${item.getTime()}"/> </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <br/>
        <a id="addModalTrigger" class="btn green waves-effect waves-light">Add +</a>

    </div>

    <%-- modal space --%>
        <div class="modal" id="addModal">
            <div class="modal-content">
                <div class="row">
                    <h5>New message</h5>
                    <div class="col s12">
                        <div class="row">
                            <div class="input-field col s12">
                                <textarea id="message" class="materialize-textarea"></textarea>
                                <label for="message">Your message</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="input-field col s6">
                                <input id="author" type="text" class="validate">
                                <label for="author">Your name</label>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="addModalSubmit" class="modal-action modal-close waves-effect waves-green btn-flat">Submit</a>
            </div>
        </div>
    <%-- modal space end--%>

    <script src="../public/js/jquery-3.1.0.min.js"></script>
    <script src="../public/js/materialize.min.js"></script>

    <script src="../public/js/message.js"></script>
</body>
</html>
